{% extends './base.html' %}
{% block title %}焦点图{% endblock %}

{% block header %}
    <link rel="stylesheet" href="{% static 'cms/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css' %}">
    <style>
        .focus-img img {
            height: 200px;
        }
    </style>
{% endblock %}

{% block footer %}
    <script src="{% static 'cms/plugins/bootstrap-datetimepicker/moment.min.js' %}"></script>
    <script src="{% static 'cms/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js' %}"></script>
    <script src="{% static 'cms/plugins/bootstrap-datetimepicker/locale/zh-cn.js' %}"></script>
    <script>
        // 上传封面
        $('.upload-btn').click(function () {
            var cur_focus = $(this).parents('.focus-box')
            var uploadBtn = $('<input type="file">')
            uploadBtn.change(function () {
                lightyear.loading('show')
                var file = this.files[0]
                var formData = new FormData()
                formData.append('file', file)
                $ajax.post({
                    url: '/cms/upload/',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        lightyear.loading('hide')
                        if (res.code === 200) {
                            cur_focus.find('input[name=thumbnail]').val(res.data.url)
                            cur_focus.find('img.thumbnail').attr('src', res.data.url)
                        } else {
                            lightyear.notify('上传错误~~', 'danger', 1000)
                        }
                    }
                })
            })
            uploadBtn.trigger('click')
        })
        const new_focus = $('#new-focus')
        new_focus.find('input[name=thumbnail]').blur(function () {
            const thumbnail_input = $(this).val()
            new_focus.find('img.thumbnail').attr('src', thumbnail_input)
            new_focus.find('img.thumbnail').attr('alt', '地址有误~~')
        })
        // 保存焦点图
        new_focus.find('.add-btn').click(function () {
            lightyear.loading('show')
            var cur_focus = $(this).parents('.focus-box')
            var title = cur_focus.find('input[name=title]').val()
            var link_to = cur_focus.find('input[name="link_to"]').val()
            var priority = cur_focus.find('input[name=priority]').val()
            var thumbnail = cur_focus.find('input[name=thumbnail]').val()
            var pub_time = cur_focus.find('input[name="pub-time"]').val()
            var end_time = cur_focus.find('input[name="end-time"]').val()
            if (!(title && link_to && thumbnail && pub_time && end_time && priority)) {
                lightyear.loading('hide')
                lightyear.notify('未完整输入~~', 'danger', 1000)
            } else {
                $ajax.post({
                    url: '/cms/focus/',
                    data: {
                        title: title,
                        link_to: link_to,
                        thumbnail: thumbnail,
                        priority: priority,
                        pub_time: pub_time,
                        end_time: end_time,
                    },
                    success: function (res) {
                        lightyear.loading('hide')
                        if (res.code === 200) {
                            cur_focus.modal('hide')
                            cur_focus.find('input').val('')
                            lightyear.notify(res.msg, 'success', 1000)
                        } else {
                            lightyear.notify(res.msg, 'danger', 1000)
                        }
                    }
                })
            }
        })
        $('#focus-box .save-btn').click(function () {
            lightyear.loading('show')
            var cur_focus = $(this).parents('.focus-box')
            var pk = cur_focus.attr('data-pk')
            var title = cur_focus.find('input[name=title]').val()
            var link_to = cur_focus.find('input[name="link_to"]').val()
            var priority = cur_focus.find('input[name=priority]').val()
            var thumbnail = cur_focus.find('input[name=thumbnail]').val()
            var pub_time = cur_focus.find('input[name="pub-time"]').val()
            var end_time = cur_focus.find('input[name="end-time"]').val()
            if (!(pk && title && link_to && thumbnail && pub_time && end_time && priority)) {
                lightyear.loading('hide')
                lightyear.notify('未完整输入~~', 'danger', 1000)
            } else {
                $ajax.put({
                    url: '/cms/focus/',
                    data: JSON.stringify({
                        pk: pk,
                        title: title,
                        link_to: link_to,
                        thumbnail: thumbnail,
                        priority: priority,
                        pub_time: pub_time,
                        end_time: end_time,
                    }),
                    success: function (res) {
                        lightyear.loading('hide')
                        if (res.code === 200) {
                            lightyear.notify(res.msg, 'success', 1000)
                        } else {
                            lightyear.notify(res.msg, 'danger', 1000)
                        }
                    }
                })
            }
        })

    </script>
{% endblock %}

{% block utils %}
    <div class="modal fade focus-box" id="new-focus" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">新焦点图</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>图片地址</label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="thumbnail" placeholder="点击上传或者填写封面地址">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default upload-btn">上传封面</button>
                                </div>
                            </div>
                            <div class="form-group">
                                <img src="" class="thumbnail" alt="">
                            </div>
                            <div class="form-group">
                                <label>优先级</label>
                                <input type="number" class="form-control" min="1" max="99"
                                       onKeyUp="value=value<1?'':value>99?'':value" name="priority"
                                       placeholder="优先级 1 ~ 99">
                            </div>
                            <div class="form-group">
                                <label>标题</label>
                                <input type="text" class="form-control" name="title" placeholder="标题">
                            </div>
                            <div class="form-group">
                                <label>链接</label>
                                <input type="text" class="form-control" name="link_to" placeholder="链接">
                            </div>
                            <div class="form-group">
                                <label>时间</label>
                                <div class="input-group">
                                    <input name="pub-time" class="form-control js-datetimepicker" type="text"
                                           placeholder="从" value=""
                                           data-side-by-side="true" data-locale="zh-cn" data-format="YYYY-MM-DD HH:mm"/>
                                    <span class="input-group-addon"><i class="mdi mdi-chevron-right"></i></span>
                                    <input name="end-time" class="form-control js-datetimepicker" type="text"
                                           placeholder="至" value=""
                                           data-side-by-side="true" data-locale="zh-cn" data-format="YYYY-MM-DD HH:mm"/>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary add-btn">新增</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block main %}
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4>焦点图管理</h4>
                    <ul class="card-btn-actions">
                        <button type="button" class="btn btn-primary btn-xs" data-toggle="modal"
                                data-target="#new-focus">
                            <i class="mdi mdi-plus"></i>新增
                        </button>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <div class="row" id="focus-box">
        {% for focus in focuses %}
            <div class="col-sm-6 focus-box" data-pk="{{ focus.id }}">
                <div class="card">
                    <div class="card-header">
                        <h4>焦点图</h4>
                        <button class="btn btn-xs btn-danger pull-right delete-btn"><i class="mdi mdi-delete"></i></button>
                        <!-- .card-actions -->
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-6 focus-img">
                                <img src="{{ focus.thumbnail }}" alt="" class="upload-btn thumbnail">
                                <input type="text" value="{{ focus.thumbnail }}" class="form-control hidden"
                                       name="thumbnail" placeholder="点击上传或者填写封面地址">
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" value="{{ focus.priority }}" name="priority"
                                           placeholder="优先级">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" value="{{ focus.title }}" name="title"
                                           placeholder="标题">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" value="{{ focus.link_to }}" name="link_to"
                                           placeholder="链接">
                                </div>
                                <div class="form-group">
                                    <div class="input-group">
                                        <input name="pub-time" class="form-control js-datetimepicker" type="text"
                                               placeholder="从" value="{{ focus.pub_time|date:"%Y-%m-%d %H:%M" }}"
                                               data-side-by-side="true"
                                               data-locale="zh-cn" data-format="YYYY-MM-DD HH:mm"/>
                                        <span class="input-group-addon"><i class="mdi mdi-chevron-right"></i></span>
                                        <input name="end-time" class="form-control js-datetimepicker" type="text"
                                               placeholder="至" value="{{ focus.end_time|date:"%Y-%m-%d %H:%M" }}"
                                               data-side-by-side="true" data-locale="zh-cn"
                                               data-format="YYYY-MM-DD HH:mm"/>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <footer class="card-footer">
                        <div class="example-right pull-right">
                            <button class="btn btn-primary save-btn" type="button">保存</button>
                        </div>
                    </footer>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}
